import DictTag, { DictValueEnum } from "@/components/DictTag";
import { ProDescriptions } from "@ant-design/pro-components";
import { Drawer } from "antd";
import React from "react";
import ReactJson from "react-json-view";
export type OperLogData = Record<string, unknown> & Partial<API.Setting.Operlog>;

export type LogProps = {
	onCancel: (flag?: boolean) => void;
	open: boolean;
	statusOptions: DictValueEnum;
	businessTypeOptions: DictValueEnum;
	operatorTypeOptions: DictValueEnum;
	value: API.Setting.OperlogVo | any;
};

const logDetails: React.FC<LogProps> = props => {
	const { open, value, onCancel, statusOptions, businessTypeOptions, operatorTypeOptions } = props;

	const handleClose = () => {
		onCancel();
	};
	return (
		<Drawer title="详情" width="1000" placement="right" onClose={handleClose} open={open}>
			<ProDescriptions<API.Setting.OperlogVo>
				column={1}
				bordered
				title={null}
				dataSource={value}
				columns={[
					{
						title: "操作模块",
						key: "text",
						dataIndex: "title",
						ellipsis: true
					},
					{
						title: "请求地址",
						key: "text",
						dataIndex: "operUrl",
						ellipsis: true
					},
					{
						title: "状态",
						key: "status",
						dataIndex: "status",
						valueType: "select",
						valueEnum: statusOptions,
						render: (_: any, record: any) => {
							return <DictTag key="status" type="tag" enums={statusOptions} value={String(record?.status)} />;
						}
					},
					{
						title: "业务类型",
						key: "businessType",
						dataIndex: "businessType",
						render: (_: any, record: any) => {
							return <DictTag key="businessType" enums={businessTypeOptions} value={String(record?.businessType)} />;
						}
					},
					{
						title: "请求方式",
						key: "requestMethod",
						dataIndex: "requestMethod",
						valueType: "text"
					},
					{
						title: "操作类别",
						key: "operatorType",
						dataIndex: "operatorType",
						render: (_: any, record: any) => {
							return <DictTag key="operatorType" type="tag" enums={operatorTypeOptions} value={String(record?.operatorType)} />;
						}
					},
					{
						title: "耗时",
						key: "costTime",
						dataIndex: "costTime",
						render: (_: any, record: any) => {
							return <>{record.costTime}毫秒</>;
						}
					},
					{
						title: "主机地址",
						dataIndex: "operIp",
						valueType: "text",
						ellipsis: true
					},
					{
						title: "操作地点",
						dataIndex: "operLocation",
						valueType: "text",
						ellipsis: true
					},
					{
						title: "操作人员",
						dataIndex: "operName",
						valueType: "text",
						ellipsis: true
					},
					{
						title: "操作类",
						key: "method",
						dataIndex: "method",
						valueType: "text",
						ellipsis: true
					},
					// {
					// 	title: "错误消息",
					// 	key: "text",
					// 	dataIndex: "errorMsg",
					// 	ellipsis: true
					// },
					{
						title: "请求参数",
						key: "operParam",
						dataIndex: "operParam",
						valueType: "text",
						render: (_: any, record: any) => {
							return (
								<>
									{record?.operParam && (
										<ReactJson
											src={record?.operParam}
											enableClipboard={false}
											displayDataTypes={false}
											indentWidth={2}
											displayObjectSize={false}
											// theme="twilight"
										/>
									)}
								</>
							);
						}
					},
					{
						title: "响应结果",
						key: "jsonResult",
						dataIndex: "jsonResult",
						valueType: "text",
						render: (_, record) => {
							return (
								<>
									{record?.jsonResult && (
										<>
											<ReactJson
												src={JSON.parse(record?.jsonResult)}
												enableClipboard={false}
												displayDataTypes={false}
												indentWidth={2}
												displayObjectSize={false}
												// theme="twilight"
											/>
										</>
									)}
								</>
							);
						}
					}
					// {
					// 	title: "堆栈信息",
					// 	key: "errorStackTrace",
					// 	dataIndex: "errorStackTrace",
					// 	valueType: "text",
					// 	render: (_, record) => {
					// 		return (
					// 			<div style={{ width: "100%" }}>
					// 				<div style={{ minWidth: 600 }}>{record?.errorStackTrace}</div>
					// 			</div>
					// 		);
					// 	}
					// }
				]}
			/>
		</Drawer>
	);
};

export default logDetails;
